<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宽高设置</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../bootstrap-icons-1.13.1/bootstrap-icons.min.css">

</head>
<body>
    <div class="container">
        <!--宽用w-* 表示-->
        <div class="w-25 bg-primary">宽度为25%</div>
        <div class="w-50 bg-danger" >宽度为50%</div>
        <div class="w-75 bg-secondary">宽度为75%</div>
        <div class="w-100 bg-warning">宽度为100%</div>
        <div class="w-auto bg-dark">自动设置宽</div>
        <div class="mw-100 bg-success">最宽为100%</div>

        <hr>
        <div style="height: 300px" >
            <!--高用h-* 表示   -->
         <div class="h-25 bg-primary ">高度为25%</div>
        <div class="h-50 bg-danger " >高度为50%</div>
        <div class="h-75 bg-secondary ">高度为75%</div>
        <div class="h-100 bg-warning ">高度为100%</div>
        <div class="h-auto bg-dark ">自动设置高</div>
        <div class="mh-100 bg-success">最高为100%</div>
        </div>
    </div>

</body>
</html>